<template>
  <div class="wrap">
    <div class="wrap__top">
      <div class="wrap__top__inputItems">
        <input
          type="text"
          class="wrap__top__inputItems__input"
          placeholder="请输入要查询的内容"
        />
        <span class="wrap__top__inputItems__button">模糊查询</span>
      </div>
      <div class="wrap__top__checks">
        <div class="wrap__top__checks__top">
          <Check
            :title="'上线状态'"
            class="wrap__top__checks__check wrap__top__checks__check--first"
            @changeValue="valueChange"
            :options="checks.statusCodeSets"
            v-if="resAll"
          />
          <Check
            :title="'品牌名称'"
            class="wrap__top__checks__check"
            :options="checks.brandNameSets"
            @changeValue="valueChange"
            v-if="resAll"
          />
          <Check
            :title="'车型名称'"
            class="wrap__top__checks__check"
            :options="checks.modelSets"
            @changeValue="valueChange"
            v-if="resAll & restBrandName"
          />
          <Check
            :title="'车机系统'"
            class="wrap__top__checks__check"
            :options="checks.huSystemSets"
            @changeValue="valueChange"
            v-if="resAll & restBrandName & restModel"
          />
          <Check
            :title="'内容板块'"
            class="wrap__top__checks__check"
            :options="checks.contentTypeSets"
            @changeValue="valueChange"
            v-if="resAll & restBrandName & restModel & restSystem"
          />
        </div>
        <div class="wrap__top__checks__buttom">
          <Check
            :title="'一级类别'"
            class="wrap__top__checks__check wrap__top__checks__check--first"
            :options="checks.firstSortSets"
            @changeValue="valueChange"
            v-if="resAll & restBrandName & restModel & restSystem & restContent"
          />
          <Check
            :title="'二级类别'"
            class="wrap__top__checks__check"
            :options="checks.secondSortSets"
            @changeValue="valueChange"
            v-if="
              resAll &
              restBrandName &
              restModel &
              restSystem &
              restContent &
              restFirst
            "
          />
          <Check
            :title="'三级类别'"
            class="wrap__top__checks__check"
            :options="checks.thirdSortSets"
            @changeValue="valueChange"
            v-if="
              resAll &
              restBrandName &
              restModel &
              restSystem &
              restContent &
              restFirst &
              restSecond
            "
          />
          <Reset class="wrap__top__checks__reset" @click="resetAll" />
          <Search class="wrap__top__checks__search" @click="search" />
        </div>
      </div>
    </div>
    <div class="wrap__buttom">
      <div class="wrap__buttom__brands">
        <div
          class="wrap__buttom__brands__brand"
          v-for="(item, index) in list.data"
          :key="{ index }"
        >
          <p class="wrap__buttom__brands__brand__title">{{ item.brandName }}</p>
          <div class="wrap__buttom__brands__brand__cars">
            <div class="wrap__buttom__brands__brand__cars__wrap">
              <div
                class="wrap__buttom__brands__brand__cars__wrap__car"
                v-for="car in item.carInfoList"
                :key="car.vehId"
              >
                <img
                  :src="'http://10.15.59.210:8003/' + car.vehImg"
                  alt=""
                  class="wrap__buttom__brands__brand__cars__wrap__car__img"
                  v-if="car.vehImg"
                />
                <div
                  alt=""
                  class="wrap__buttom__brands__brand__cars__wrap__car__img"
                  v-else
                >
                  暂无图片
                </div>
                <div class="wrap__buttom__brands__brand__cars__wrap__car__text">
                  <p
                    class="
                      wrap__buttom__brands__brand__cars__wrap__car__text__name
                    "
                  >
                    {{ car.model }}
                  </p>
                  <p
                    class="
                      wrap__buttom__brands__brand__cars__wrap__car__text__sys
                    "
                  >
                    车机系统名称：{{ car.huSystem }}
                  </p>
                  <p
                    class="
                      wrap__buttom__brands__brand__cars__wrap__car__text__updata
                    "
                  >
                    更新时间：{{ car.otaTime.substring(0, 10) }}
                  </p>
                  <ToDetail
                    class="
                      wrap__buttom__brands__brand__cars__wrap__car__text__buttom
                    "
                    :model="car.model"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <el-pagination
        @current-change="next"
        background
        small
        layout="prev, pager, next"
        :total="list.totalPages * 10"
        class="wrap__buttom__page"
        :current-page="list.pageNum"
      />
    </div>
  </div>
</template>
<script>
import Check from "@/components/Check.vue";
import Reset from "@/components/Reset.vue";
import Search from "@/components/Search.vue";
import ToDetail from "@/components/ToDetail.vue";
import { get } from "@/utils/request";
import { reactive, toRefs, ref, nextTick } from "vue";
import { useRouter } from "vue-router";
//筛选框逻辑
const useSelectEffect = () => {
  const data = reactive({
    checks: {},
    selected: {
      statusCode: "",
      brandName: "",
      model: "",
      huSystem: "",
      contentType: "",
      firstSort: "",
      secondSort: "",
      thirdSort: "",
    },
  });

  // 刷新
  let resAll = ref(true);
  let restBrandName = ref(true);
  let restModel = ref(true);
  let restSystem = ref(true);
  let restContent = ref(true);
  let restFirst = ref(true);
  let restSecond = ref(true);
  //请求数据
  const getChecks = async (
    statusCode,
    brandName,
    model,
    huSystem,
    contentType,
    firstSort,
    secondSort,
    thirdSort
  ) => {
    const result = await get(
      "/icvdb/content/getCheckBox",
      {
        statusCode: statusCode,
        brandName: brandName,
        model: model,
        huSystem: huSystem,
        contentType: contentType,
        firstSort: firstSort,
        secondSort: secondSort,
        thirdSort: thirdSort,
      },
      { Authorization: "Bearer" + " " + localStorage.token }
    );
    data.checks = result.data;
  };
  getChecks("", "", "", "", "", "", "", "");

  //数据改变
  const valueChange = async (title, option) => {
    let tmp = {};
    if (title === "上线状态") {
      tmp = data.checks.statusCodeSets;
      data.selected.statusCode = option;
      if (option === "") {
        data.selected.statusCode = "";
        data.selected.brandName = "";
        data.selected.model = "";
        data.selected.huSystem = "";
        data.selected.contentType = "";
        data.selected.firstSort = "";
        data.selected.secondSort = "";
        data.selected.thirdSort = "";
        await getChecks(
          data.selected.statusCode,
          data.selected.brandName,
          data.selected.model,
          data.selected.huSystem,
          data.selected.contentType,
          data.selected.firstSort,
          data.selected.secondSort,
          data.selected.thirdSort
        );
        resAll.value = false;
        nextTick(() => {
          resAll.value = true;
        });
      } else {
        await getChecks(
          data.selected.statusCode,
          data.selected.brandName,
          data.selected.model,
          data.selected.huSystem,
          data.selected.contentType,
          data.selected.firstSort,
          data.selected.secondSort,
          data.selected.thirdSort
        );
        data.checks.statusCodeSets = tmp;
      }
    } else if (title === "品牌名称") {
      tmp = data.checks.brandNameSets;
      data.selected.brandName = option;
      if (option === "") {
        data.selected.brandName = "";
        data.selected.model = "";
        data.selected.huSystem = "";
        data.selected.contentType = "";
        data.selected.firstSort = "";
        data.selected.secondSort = "";
        data.selected.thirdSort = "";
        await getChecks(
          data.selected.statusCode,
          data.selected.brandName,
          data.selected.model,
          data.selected.huSystem,
          data.selected.contentType,
          data.selected.firstSort,
          data.selected.secondSort,
          data.selected.thirdSort
        );
        restBrandName.value = false;
        nextTick(() => {
          restBrandName.value = true;
        });
      } else {
        await getChecks(
          data.selected.statusCode,
          data.selected.brandName,
          data.selected.model,
          data.selected.huSystem,
          data.selected.contentType,
          data.selected.firstSort,
          data.selected.secondSort,
          data.selected.thirdSort
        );
        data.checks.brandNameSets = tmp;
      }
    } else if (title === "车型名称") {
      tmp = data.checks.modelSets;
      data.selected.model = option;
      if (option === "") {
        data.selected.model = "";
        data.selected.huSystem = "";
        data.selected.contentType = "";
        data.selected.firstSort = "";
        data.selected.secondSort = "";
        data.selected.thirdSort = "";
        await getChecks(
          data.selected.statusCode,
          data.selected.brandName,
          data.selected.model,
          data.selected.huSystem,
          data.selected.contentType,
          data.selected.firstSort,
          data.selected.secondSort,
          data.selected.thirdSort
        );
        restModel.value = false;
        nextTick(() => {
          restModel.value = true;
        });
      } else {
        await getChecks(
          data.selected.statusCode,
          data.selected.brandName,
          data.selected.model,
          data.selected.huSystem,
          data.selected.contentType,
          data.selected.firstSort,
          data.selected.secondSort,
          data.selected.thirdSort
        );
        data.checks.modelSets = tmp;
      }
    } else if (title === "车机系统名称") {
      tmp = data.checks.huSystemSets;
      data.selected.huSystem = option;
      if (option === "") {
        data.selected.huSystem = "";
        data.selected.contentType = "";
        data.selected.firstSort = "";
        data.selected.secondSort = "";
        data.selected.thirdSort = "";
        await getChecks(
          data.selected.statusCode,
          data.selected.brandName,
          data.selected.model,
          data.selected.huSystem,
          data.selected.contentType,
          data.selected.firstSort,
          data.selected.secondSort,
          data.selected.thirdSort
        );
        restSystem.value = false;
        nextTick(() => {
          restSystem.value = true;
        });
      } else {
        await getChecks(
          data.selected.statusCode,
          data.selected.brandName,
          data.selected.model,
          data.selected.huSystem,
          data.selected.contentType,
          data.selected.firstSort,
          data.selected.secondSort,
          data.selected.thirdSort
        );
        data.checks.huSystemSets = tmp;
      }
    } else if (title === "内容板块") {
      tmp = data.checks.contentTypeSets;
      data.selected.contentType = option;
      if (option === "") {
        data.selected.contentType = "";
        data.selected.firstSort = "";
        data.selected.secondSort = "";
        data.selected.thirdSort = "";
        await getChecks(
          data.selected.statusCode,
          data.selected.brandName,
          data.selected.model,
          data.selected.huSystem,
          data.selected.contentType,
          data.selected.firstSort,
          data.selected.secondSort,
          data.selected.thirdSort
        );
        restContent.value = false;
        nextTick(() => {
          restContent.value = true;
        });
      } else {
        await getChecks(
          data.selected.statusCode,
          data.selected.brandName,
          data.selected.model,
          data.selected.huSystem,
          data.selected.contentType,
          data.selected.firstSort,
          data.selected.secondSort,
          data.selected.thirdSort
        );
        data.checks.contentTypeSets = tmp;
      }
    } else if (title === "一级类别") {
      tmp = data.checks.firstSortSets;
      data.selected.firstSort = option;
      if (option === "") {
        data.selected.firstSort = "";
        data.selected.secondSort = "";
        data.selected.thirdSort = "";
        await getChecks(
          data.selected.statusCode,
          data.selected.brandName,
          data.selected.model,
          data.selected.huSystem,
          data.selected.contentType,
          data.selected.firstSort,
          data.selected.secondSort,
          data.selected.thirdSort
        );
        restFirst.value = false;
        nextTick(() => {
          restFirst.value = true;
        });
      } else {
        await getChecks(
          data.selected.statusCode,
          data.selected.brandName,
          data.selected.model,
          data.selected.huSystem,
          data.selected.contentType,
          data.selected.firstSort,
          data.selected.secondSort,
          data.selected.thirdSort
        );
        data.checks.firstSortSets = tmp;
      }
    } else if (title === "二级类别") {
      tmp = data.checks.secondSortSets;
      data.selected.secondSort = option;
      if (option === "") {
        data.selected.secondSort = "";
        data.selected.thirdSort = "";
        await getChecks(
          data.selected.statusCode,
          data.selected.brandName,
          data.selected.model,
          data.selected.huSystem,
          data.selected.contentType,
          data.selected.firstSort,
          data.selected.secondSort,
          data.selected.thirdSort
        );
        restSecond.value = false;
        nextTick(() => {
          restSecond.value = true;
        });
      } else {
        await getChecks(
          data.selected.statusCode,
          data.selected.brandName,
          data.selected.model,
          data.selected.huSystem,
          data.selected.contentType,
          data.selected.firstSort,
          data.selected.secondSort,
          data.selected.thirdSort
        );
        data.checks.secondSortSets = tmp;
      }
    } else if (title === "三级类别") {
      tmp = data.checks.thirdSortSets;
      data.selected.thirdSort = option;
      await getChecks(
        data.selected.statusCode,
        data.selected.brandName,
        data.selected.model,
        data.selected.huSystem,
        data.selected.contentType,
        data.selected.firstSort,
        data.selected.secondSort,
        data.selected.thirdSort
      );
      data.checks.thirdSortSets = tmp;
    }
  };

  //重置按钮逻辑
  const reset = async () => {
    data.selected.statusCode = "";
    data.selected.brandName = "";
    data.selected.model = "";
    data.selected.huSystem = "";
    data.selected.contentType = "";
    data.selected.firstSort = "";
    data.selected.secondSort = "";
    data.selected.thirdSort = "";
    getChecks("", "", "", "", "", "", "", "");
  };

  const { selected } = toRefs(data);
  const { checks } = toRefs(data);
  return {
    checks,
    valueChange,
    resAll,
    restBrandName,
    restModel,
    restSystem,
    restContent,
    restFirst,
    restSecond,
    selected,
    reset,
  };
};

//列表内容逻辑
const useContentEffect = () => {
  const data = reactive({
    list: {},
  });

  //请求列表数据
  const getList = async (
    statusCode,
    brandName,
    model,
    huSystem,
    contentType,
    firstSort,
    secondSort,
    thirdSort,
    pageNum
  ) => {
    const result = await get(
      "/icvdb/content",
      {
        statusCode: statusCode,
        brandName: brandName,
        model: model,
        huSystem: huSystem,
        contentType: contentType,
        firstSort: firstSort,
        secondSort: secondSort,
        thirdSort: thirdSort,
        pageNum: pageNum,
        pageSize: 3,
      },
      { Authorization: "Bearer" + " " + localStorage.token }
    );
    data.list = result;
  };
  getList("", "", "", "", "", "", "", "", 1);
  const { list } = toRefs(data);
  return { list, getList };
};

export default {
  components: { Check, Search, Reset, ToDetail },
  setup() {

    const router = useRouter();
    // 筛选栏逻辑
    const {
      checks,
      valueChange,
      resAll,
      restBrandName,
      restModel,
      restSystem,
      restContent,
      restFirst,
      restSecond,
      selected,
      reset,
    } = useSelectEffect();

    //查询按钮逻辑
    const search = () => {
      if (!selected.value.contentType) {
        getList(
          selected.value.statusCode,
          selected.value.brandName,
          selected.value.model,
          selected.value.huSystem,
          selected.value.contentType,
          selected.value.firstSort,
          selected.value.secondSort,
          selected.value.thirdSort,
          1
        );
      } else if (selected.value.contentType === "性能参数") {
        router.push({
          name: "Detail",
          query: {
            model: selected.value.model,
          },
        });
      }else if (selected.value.contentType === "生态服务"){
        
      }
    };

    // 重置按钮逻辑
    const resetAll = () => {
      reset();
      getList("", "", "", "", "", "", "", "", 1);
      resAll.value = false;
      nextTick(() => {
        resAll.value = true;
      });
    };

    //列表逻辑
    const { list, getList } = useContentEffect();

    //切换页面
    const next = (currentPage) => {
      getList(
        statusCode.value,
        brandName.value,
        model.value,
        huSystem.value,
        contentType.value,
        firstSort.value,
        secondSort.value,
        thirdSort.value,
        currentPage
      );
    };

    return {
      checks,
      valueChange,
      list,
      getList,
      resAll,
      restBrandName,
      restModel,
      restSystem,
      restContent,
      restFirst,
      restSecond,
      search,
      resetAll,
      next,
      selected,
    };
  },
};
</script>
<style lang="scss" scoped>
@import "@/style/viriables.scss";
.wrap {
  height: 91vh;
  flex: 1;
  margin-top: 0.5vh;
  margin-left: 1rem;
  display: flex;
  flex-direction: column;
  &__top {
    height: 22.9rem;
    min-height: 150px;
    background-color: white;
    position: relative;
    &__inputItems {
      overflow: hidden;
      display: flex;
      margin-top: 3.7rem;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      &__input {
        height: 4rem;
        width: 65.3rem;
        border: 2px solid $lignt-yellow;
        text-indent: 1rem;
        transition: 0.3s ease;
      }
      &__input:hover {
        border: 2px solid $deep-yellow;
      }
      &__button {
        height: 4rem;
        width: 9.9rem;
        background-color: $lignt-yellow;
        line-height: 4rem;
        color: white;
        text-align: center;
        font-size: 1.8rem;
        cursor: pointer;
        transition: 0.3s ease;
      }
      &__button:hover {
        background-color: $deep-yellow;
      }
    }
    &__checks {
      position: absolute;
      bottom: 3.7rem;
      width: max-content;
      margin: 0 auto;
      &__check {
        margin-left: 4.1rem;
      }
      &__check--first {
        margin-left: 1rem;
      }
      &__buttom {
        margin-top: 2.3rem;
      }
      &__search {
        float: right;
        margin-right: 3rem;
      }
      &__reset {
        float: right;
      }
    }
  }
  &__buttom {
    flex: 1;
    background-color: white;
    margin-top: 0.7rem;
    position: relative;
    &__brands {
      &__brand {
        margin-top: 0.5rem;
        &:first-child {
          margin-top: 0rem;
        }
        &__title {
          height: 3.7rem;
          background-color: $light-gray;
          line-height: 3.7rem;
          text-indent: 2rem;
          font-size: 1.6rem;
          font-weight: bolder;
        }
        &__cars {
          overflow-x: scroll;
          overflow-y: hidden;
          width: 100%;
          height: min-content;
          &__wrap {
            display: flex;
            width: min-content;
            &__car {
              height: 13.4rem;
              width: 37.2rem;
              margin: 1rem 1rem 0 1rem;
              border: 0.1rem solid $border-gray;
              display: flex;
              align-items: center;
              &__img {
                width: 15.3rem;
                height: 8.1rem;
                margin-left: 0.5rem;
                text-align: center;
                line-height: 8.1rem;
                background-color: $light-gray;
              }
              &__text {
                flex: 1;
                padding-right: 1.1rem;
                &__name {
                  text-align: center;
                  font-size: 1.6rem;
                  font-weight: bold;
                  margin-bottom: 1rem;
                }
                &__sys {
                  font-size: 1.3rem;
                  font-weight: lighter;
                  text-align: right;
                  margin-bottom: 1rem;
                }
                &__updata {
                  font-size: 1.3rem;
                  font-weight: lighter;
                  white-space: nowrap;
                  text-align: right;
                  margin-bottom: 1rem;
                }
                &__buttom {
                  float: right;
                }
              }
            }
          }
          &::-webkit-scrollbar {
            height: 0.8rem;
          }
          &::-webkit-scrollbar-button {
            display: none;
          }
          &::-webkit-scrollbar-thumb {
            background-color: $scroll-gray;
            border-radius: 10px;
          }
          &::-webkit-scrollbar-thumb:hover {
            background-color: $scroll-deep-gray;
          }
        }
      }
    }
    &__page {
      position: absolute;
      width: min-content;
      left: 50%;
      transform: translate(-50%);
      margin-top: 2rem;
      bottom: 1rem;
    }
  }
}
</style>